/* 屏幕尺寸 */
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xl: 1920px;

/* 默认 */
.loop(24, ~"dw-col");

/* 超小屏幕 屏幕宽度小于768px */
@media screen and (max-width: @screen-sm) {
  .dw-col-xs-0 {
    display: none;
  }
  .loop(24, ~"dw-col-xs");
}

/* 小屏幕 平板等 屏幕宽度大于等于768px */
@media screen and (min-width: @screen-sm) {
  .dw-col-sm-0 {
    display: none;
  }
  .loop(24, ~"dw-col-sm");
}

/* 中等屏幕 桌面显示器等 屏幕宽度大于等于992px */
@media screen and (min-width: @screen-md) {
  .dw-col-md-0 {
    display: none;
  }
  .loop(24, ~"dw-col-md");
}

/* 大屏幕 大桌面显示器等 屏幕宽度大于等于1200px */
@media screen and (min-width: @screen-lg) {
  .dw-col-lg-0 {
    display: none;
  }
  .loop(24, ~"dw-col-lg");
}

/* 超大屏幕 屏幕宽度大于等于1920px */
@media screen and (min-width: @screen-xl) {
  .dw-col-xl-0 {
    display: none;
  }
  .loop(24, ~"dw-col-xl");
}

// 循环
.loop(@n,@str,@i:1) when (@i =< @n) {
  // 每次调用时产生的样式代码
  .@{str}-@{i} {
    width: (@i * 100% / @n);
  }

  .@{str}-offset-@{i} {
    margin-left: (@i * 100% / @n);
  }

  .@{str}-pull-@{i} {
    position: relative;
    right: (@i * 100% / @n);
  }

  .@{str}-push-@{i} {
    position: relative;
    left: (@i * 100% / @n);
  }
  // 递归调用自身
  .loop(@n, @str, (@i + 1));
}
